<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react 传值 </title>
</head>

<body>
    <div id="app"  ></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 专门设置props的库 -->
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 控制组件里边的html的dom元素,2中模式创建组件,class this
        class Myref extends React.Component {
            constructor(props) {
                super(props)
                // 修改绑定
                this.getref = this.getref.bind(this)
            }
            getref(){
                this.mydiv.innerText = "我是回调的方法"
                console.log(this.mydiv)
            }
            render() {
                // 已经淘汰了,有内存泄漏的风险,子组件用不了
                // this 静态的 指向的是定义时候的对象Myref
                // 回调函数法, 匿名函数来充当回调;额
                return (
                    <div>
                    <div className="myclass" ref={ele => this.mydiv=ele }> 我用ref可以获取到</div>
                    <button onClick={this.getref} >按钮</button>                    
                    <input type="text"  />
                    </div>
                )
            }
        }
        ReactDOM.render(<Myref />, document.getElementById('app'))
        // window
    </script>
</body>

</html>